<template>
  <div>
    <div>
      <div style="display:flex;flex-direction:row;margin-bottom: 10px;">
        <router-link to="/dashboard/portlist/create">
          <Button type="primary">新增</Button>
        </router-link>
<!--        <EditPort :id="id"></EditPort>-->
        <Input v-model="keyword" @on-search="searchPort" @on-clear="clearInput" search enter-button placeholder="服务名 端口号搜索" clearable style="width: 220px"/>
      </div>
    </div>
    <div>
      <Table   highlight-row  :columns="columns" :data="data" size="small" ref="table"  @on-row-click="onCurrentChange"></Table>
    </div>
    <div>
      <Page style="margin-top: 10px;text-align: center"  @on-change="handlePageChange"  :current="currentPage" :total="total" show-total />
    </div>
  </div>

</template>
<script>
import axios from "axios";
// import AddPort from "@/components/AddPort.vue";
// import EditPort from "@/components/EditPort.vue";
import Deleteport from "@/components/Deleteport.vue";


export default {
  components: {
    // AddPort,
    // EditPort
  },
  data () {
    return {
      columns: [],
      data: [],
      keyword: '',
      id: null,
      currentPage: 1, // 当前页码
      total:0
    }
  },
  mounted() {
    this.getData();     // 在组件加载时获取数据
  },
  methods: {
    getData() {
      axios.get(`http://172.30.53.223:8888/api/portlist?keyword=${this.keyword}&page=${this.currentPage}`)
          .then(response => {
            this.columns=[
              {
                type: 'selection',
                width: 60,
                align: 'center'
              },
              { title: '服务名称', key: 'ServerName',align: 'center',},
              { title: '服务端口', key: 'Port1',align: 'center',},
              { title: '管理端口', key: 'Port2',align: 'center',},
              { title: 'Dubbo端口', key: 'Port3',align: 'center',},
              {title: '操作', key: 'more', align: 'center',
                render: (h, { row: item  }) => {
                  return h(Deleteport , {
                    props: {
                      type: 'primary',
                      id: item.ID
                    }
                  }, '删除');
                }
              }
            ];
            if (response.data.portlist === null) {
              this.data = [];
            } else {
            this.data = response.data.portlist.map((item) => ({
              ID:item.ID,
              ServerName:item.ServiceName,
              Port1: item.Port1,
              Port2: item.Port2,
              Port3: item.Port3,
              more:'',
            }));}
            this.total = response.data.total;
          })
          .catch(error => {
            console.error("获取数据出错:", error);
          });
          },
    onCurrentChange(currentRow){
      this.id = currentRow.ID
    },
    handlePageChange(currentPage){
      // 当页码变化时，更新currentPage并重新获取表格数据
      this.currentPage = currentPage;
      this.getData();
    },
    clearInput() {
      this.keyword = ''; // 清空关键字
      this.getData(); // 重新获取数据
    },
    searchPort() {
      this.currentPage = 1
      this.getData();
    },
  },
}
</script>
